<template>
    <div>
            <!-- 轮播图区域（保持原有） -->
    <!-- 轮播图区域（添加毛玻璃效果） -->
  <el-carousel height="900px" indicator-position="outside" arrow="hover" style="margin-top: -12px;margin-left: -22px;margin-right: -25px;">
    <el-carousel-item>
      <div class="banner" style="background-image: url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=1920&q=80')">
        <!-- 毛玻璃效果的文字容器 -->
        <div class="banner-text glass-effect">
          <h2>MES制造执行系统</h2>
          <p>智能制造 · 数字化工厂解决方案</p>
          <p style="font-size: 16px; margin-top: 10px;">实现生产过程的实时监控、数据采集与智能分析</p>       
        </div>
      </div>
    </el-carousel-item>
    <el-carousel-item>
      <div class="banner" style="background-image: url('https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=1920&q=80')">
        <div class="banner-text glass-effect">
          <h2>生产管理 · 精益制造</h2>
          <p>优化生产流程，提升制造效率</p>
          <p style="font-size: 16px; margin-top: 10px;">全程追溯、质量管控、资源优化配置</p>
          <el-button type="primary" size="large">立即体验</el-button>
        </div>
      </div>
    </el-carousel-item>
    <el-carousel-item>
      <div class="banner" style="background-image: url('https://images.unsplash.com/photo-1518770660439-4636190af475?w=1920&q=80')">
        <div class="banner-text glass-effect">
          <h2>数据驱动 · 智能决策</h2>
          <p>实时数据分析，助力企业数字化转型</p>
          <p style="font-size: 16px; margin-top: 10px;">可视化报表、智能预警、精准决策支持</p>
          <el-button type="primary" size="large">查看功能</el-button>
        </div>
      </div>
    </el-carousel-item>
  </el-carousel>

    <!-- 新增图表区域 -->
    <div class="charts-container">
      <!-- 柱状折线混合图 -->
      <div class="chart-wrapper">
        <h3>生产数据统计分析</h3>
        <div ref="barLineChart" class="chart"></div>
      </div>
      <!-- 甘特图 -->
      <div class="chart-wrapper">
        <h3>生产计划进度甘特图</h3>
        <div ref="ganttChart" class="chart"></div>
      </div>
    </div>
    <!-- 页脚 -->
    <el-footer class="footer">
      <div class="footer-content">
        <p>© 2025 MES制造执行系统 All Rights Reserved</p>
        <div class="footer-links">
          <el-link type="default">关于我们</el-link>
          <el-link type="default">联系我们</el-link>
          <el-link type="default">隐私政策</el-link>
        </div>
      </div>
    </el-footer>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  mounted() {
    // 初始化甘特图
    this.$nextTick(() => {
      this.initGanttChart()
      // 初始化柱状折线混合图
      this.initBarLineChart()

      // 监听窗口大小变化，重绘图表
      this.resizeHandler = () => {
        if (this.ganttChart) {
          this.ganttChart.resize()
        }
        if (this.barLineChart) {
          this.barLineChart.resize()
        }
      }
      window.addEventListener('resize', this.resizeHandler)
    })
  },
  methods: {
    // 初始化甘特图
    initGanttChart() {
      this.ganttChart = echarts.init(this.$refs.ganttChart)
      
      const option = {
        tooltip: {
          formatter: function(params) {
            return `${params.name}<br/>开始: ${params.data[0]}<br/>结束: ${params.data[1]}`
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '15%',
          top: '15%'
        },
        xAxis: {
          type: 'time',
          axisLabel: {
            formatter: '{yyyy}-{MM}-{dd}'
          }
        },
        yAxis: {
          type: 'category',
          data: ['产品设计', '物料采购', '生产准备', '生产执行', '质量检验', '成品入库']
        },
        series: [
          {
            type: 'bar',
            data: [
              ['2025-01-01', '2025-03-15'],
              ['2025-02-20', '2025-04-30'],
              ['2025-05-01', '2025-06-15'],
              ['2025-06-16', '2025-07-31'],
              ['2025-08-01', '2025-09-15'],
              ['2025-09-16', '2025-12-31']
            ],
            itemStyle: {
              color: function(params) {
                const colorList = ['#4E79A7', '#F28E2C', '#E15759', '#76B7B2', '#59A14F', '#EDC949']
                return colorList[params.dataIndex]
              }
            },
            barCategoryGap: '20%'
          }
        ]
      }

      this.ganttChart.setOption(option)
    },

    // 初始化柱状折线混合图
    initBarLineChart() {
      this.barLineChart = echarts.init(this.$refs.barLineChart)
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['产量(件)', '生产效率(%)']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: [
          {
            type: 'value',
            name: '产量(件)',
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '生产效率(%)',
            min: 0,
            max: 100,
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            name: '产量(件)',
            type: 'bar',
            data: [1200, 1900, 3000, 2400, 3800, 4200],
            itemStyle: {
              color: '#5470C6'
            }
          },
          {
            name: '生产效率(%)',
            type: 'line',
            yAxisIndex: 1,
            data: [65, 72, 68, 80, 85, 92],
            lineStyle: {
              color: '#EE6666'
            },
            symbol: 'circle',
            symbolSize: 8
          }
        ]
      }

      this.barLineChart.setOption(option)
    }
  },
  beforeUnmount() {
    // 移除事件监听，释放图表实例
    if (this.resizeHandler) {
      window.removeEventListener('resize', this.resizeHandler)
    }
    if (this.ganttChart) {
      this.ganttChart.dispose()
    }
    if (this.barLineChart) {
      this.barLineChart.dispose()
    }
  },
  data() {
    return {
      ganttChart: null,
      barLineChart: null,
      resizeHandler: null
    }
  }
}
</script>

<style scoped>
/* 轮播图样式 */
.banner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding-left: 80px;
}

.banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(39, 60, 117, 0.4) 0%, rgba(25, 42, 86, 0.5) 100%);
  z-index: 1;
}

.banner-text {
  position: relative;
  z-index: 2;
}
/* 毛玻璃效果容器 */
.banner-text.glass-effect {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2); /* 增强文字可读性 */
  /* 毛玻璃核心样式 */
  background: rgba(255, 255, 255, 0.15); /* 半透明白色背景 */
  backdrop-filter: blur(10px); /* 背景模糊（毛玻璃） */
  -webkit-backdrop-filter: blur(10px); /* 兼容Safari */
  border-radius: 12px; /* 圆角 */
  padding: 40px 50px; /* 内边距 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 细边框增强质感 */
  max-width: 600px; /* 限制宽度 */
  text-align: left; /* 文字左对齐 */
}

.banner-text h2 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 2px;
  text-align: left;
}

.banner-text p {
  font-size: 20px;
  margin-bottom: 10px;
  line-height: 1.6;
  text-align: left;
}
.banner-text .el-button {
  margin-top: 20px;
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 25px;
}
/* 页脚样式（保持原有） */
.footer {
  background-color: #333;
  color: #fff;
  padding: 20px 40px;
  text-align: center;
  margin-left: -25px;
  margin-right: -25px;
}

.footer-links {
  margin-top: 10px;
}

.footer-links .el-link {
  color: #ccc;
  margin: 0 10px;
}

/* 图表容器样式 */
.charts-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding: 32px;
  margin-top: 32px;
  margin-left: -25px;
  margin-right: -25px;
}

.chart-wrapper {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.chart-wrapper h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
}

.chart {
  width: 100%;
  height: 400px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .charts-container {
    grid-template-columns: 1fr;
  }
}
</style>